<template>
  <el-dialog :title="title" :visible="dialogFormVisible" @close="handleClose()">
    <el-form ref="roleForm" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入角色名称" />
      </el-form-item>
      <el-form-item label="角色描述" prop="description">
        <el-input v-model="form.description" placeholder="请输入角色描述" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="addRolecontent()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { addRoleApi, getRoleInfoApi, editRoleInfoApi } from '@/api/setting'
export default {
  props: {
    // eslint-disable-next-line vue/require-prop-types
    dialogFormVisible: {
      typeof: Boolean,
      default: false
    },
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      form: {
        name: '',
        description: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入角色名称',
            trigger: ['blur', 'change']
          }
        ],
        description: [
          {
            required: true,
            message: '请输入角色描述',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  methods: {
    // 关闭弹层
    handleClose() {
      // 下面两行代码都可以关闭弹层
      //  1.this.$emit('closeDialogFn')
      //  2.this.$emit('update:dialogVisible', false)
      //  但是想要使用第二种办法是由先决条件的；因为我们是从父组件传过来的，是控制弹层的显隐的；我们点击取消就要给这个传过来的值赋个false，但是不能直接修改prop接收的值，那就要使用子传父值得方法了；这就有了以上两个方法得出现。第二种方法需要在父组件传给子组件值的时候添加个async的修饰符，然后按照下面 this.$emit('update:dialogVisible', "要传的值")的固定格式书写就可以子组件向父组件传值了
      this.$emit('update:dialogFormVisible', false)
      // 我们还要将我们的form给清空在关闭弹层的时候，因为form是根据我们输入的值实时变动的，即使我们关闭了弹层，form里面的值还是在的，下面的重置表单并不能将form表单的值重置
      this.form = {
        name: '',
        description: ''
      }
      // 重置表单【将校验结构取消掉并且清空表单数据】
      this.$refs.roleForm.resetFields()
    },
    // 点击确定按钮触发的事件
    addRolecontent() {
      // 先校验，校验通过之后再发送请求，然后重新获取数据列表渲染到页面上，最后提示成功。
      this.$refs.roleForm.validate(async (valid) => {
        // 先对表单进行验证，只有验证通过了我们才能让其发起接口请求
        if (!valid) {
          // 校验不通过
          return
        } else {
          // 校验通过
          // 再来个if判断，因为添加角色和编辑角色用的是同一个方法
          if (this.form.permIds) {
            // 如果form这个对象有permIds，那就证明是编辑角色
            await editRoleInfoApi(this.form)
            this.$message.success('编辑角色成功！')
          } else {
            // 新增角色
            await addRoleApi(this.form)
            this.$message.success('新增角色成功！')
          }
          // 关闭弹层
          this.handleClose()
          // 重新渲染角色列表
          this.$emit('getRoleList')
        }
      })
    },
    // 获取角色信息，用作数据回显
    async getRoleInfo(id) {
      const res = await getRoleInfoApi(id)
      this.form = res.data
      // console.log(this.form)
    }
  }
}
</script>

<style></style>
